<template>
  <div class="root">
    <wux-spin nested :spinning="contentSpinning">
      <wux-cell-group :title="'订单号：' + orderId">
        <div class="tran_info" v-for="(item,index) in transactionDetail" :key="index">
          <div
            :class="index.length > 0 && index === items.length - 1  ? 'tran_border_el':'tran_border'"
          >
            <i
              class="icon_img float_left"
              :style="{background:'url('+ item.img + ')',backgroundSize:'cover'}"
            ></i>
            <div class="float_left">
              <p>{{item.commodityName}}</p>
              <span>x {{item.amount}}</span>
            </div>
            <span class="money_font float_right">{{item.price * item.amount}}</span>
          </div>
        </div>
      </wux-cell-group>
    </wux-spin>
  </div>
</template>

<script>
import transactionApi from "@/api/transaction";

export default {
  data() {
    return {
      contentSpinning: false,
      transactionDetail: [],
      shopTitle: ""
    };
  },

  mounted() {
    wx.showShareMenu();
    this.queryTransactionDetail();
  },

  computed: {
    orderId() {
      return this.$store.state.orderId;
    }
  },

  methods: {
    queryTransactionDetail() {
      const self = this;
      this.contentSpinning = true;
      this.$http
        .request({
          url: transactionApi.queryTransactionDetail,
          method: "POST",
          body: { orderId: this.orderId }
        })
        .then(res => {
          self.contentSpinning = false;
          self.transactionDetail = res.list;
          self.shopTitle = res.list[0].shopTitle;
        });
    }
  }
};
</script>

<style scoped lang="less">
.root {
  .tran_info {
    padding: 0 20px;
    .tran_border_el {
      padding: 15px 0;
      overflow: hidden;
      .icon_img {
        width: 40px;
        height: 40px;
        margin-right: 20px;
      }
      .float_left {
        float: left;
        p {
          font-weight: 700;
        }
        span {
          font-size: 12px;
          color: #bbbbbb;
        }
      }
      .money_font {
        font-weight: 700;
      }
      .float_right {
        float: right;
      }
    }
    .tran_border {
      padding: 15px 0;
      border-bottom: 1px solid #e4e4e5;
      overflow: hidden;
      .icon_img {
        width: 40px;
        height: 40px;
        margin-right: 20px;
      }
      .float_left {
        float: left;
        p {
          font-weight: 700;
        }
        span {
          font-size: 12px;
          color: #bbbbbb;
        }
      }
      .money_font {
        font-weight: 700;
      }
      .float_right {
        float: right;
      }
    }
  }
}
</style>